<template>
  <div>
    <div>
      <a-button type="primary" size="small" @click="addClick()">
        添加
      </a-button>
      <add-skills-com ref="AddSkillsCom" @success="loadModels" />
    </div>
    <br />
    <a-table border :columns="columns" :data-source="models" row-key="_id">
      <template slot="option" slot-scope="_,item">
        <a-button type="primary" size="small" style="margin-right: 5px" @click="addClick(item)">
          编辑
        </a-button>
        <a-button type="danger" size="small" @click="removeClick(item)">
          删除
        </a-button>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { AddSkillsCom, AddSkillsComType } from '@/components/admin/web/skills/add'
import Skills from '~/models/skills'

@Component({
  name: 'AdminWebSkills',
  layout: 'admin',
  head () {
    return {
      title: '技能'
    }
  },
  components: {
    AddSkillsCom
  },
  async asyncData () {
    const list = await Skills.list()
    return { models: list }
  }
})
export default class AdminWebSkills extends Vue {
  models: Array<Skills> = []

  columns = [
    {
      title: '名称',
      key: 'name',
      width: 200,
      dataIndex: 'name'
    },
    {
      title: '说明',
      key: 'show',
      dataIndex: 'show'
    },
    {
      title: '值',
      key: 'num',
      dataIndex: 'num',
      width: '100px'
    },
    {
      title: '操作',
      scopedSlots: { customRender: 'option' },
      width: 150,
      align: 'center'
    }
  ]

  async loadModels () {
    this.models = await Skills.list()
  }

  addClick (model?: Skills) {
    (this.$refs.AddSkillsCom as AddSkillsComType).show(model)
  }

  removeClick (model: Skills) {
    this.$confirm({
      title: '刪除提示',
      content: `確定要刪除【${model.name}】嘛？`,
      onOk: () => {
        const skillsModel = Skills.creatModelWithJson(model)
        skillsModel.deleteModel().then(() => {
          this.loadModels()
          this.$message.success('删除成功')
        })
      }
    })
  }
}
</script>

<style scoped>

</style>
